<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <style>
         .a1{
      width: 100px;
      height: 100px;
      border: 1px solid black;
}
    </style>
   
</head>
<body>
    <div id="app">
        <div v-if="count===10" class="a1"></div>
        <button @click="add">点击</button>
        <div>
            <button @click="a++">点击</button>
            <div v-if="a%2===0">这是一段话</div>
        </div>
        <div><button @click="jian" :disabled="b<=1">-</button>{{b}}<button @click="jia" :disabled="b>=10">+</button></div>  
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref}=Vue;
 let app= createApp({
    setup(){
        let count=ref(0);
        let a=ref(0);
        let b=ref(1)
         function add (){
          count.value++
         }
         function jian(){
            b.value--;
         }
         function jia(){
                b.value++;
         }
        return{
            count,
            add,
            a,
            b,
            jia,
            jian
        }
        }
    })
    app.mount("#app")
</script>
</html>